<template>
    <view class="status_container">
        <div class="status_box">
            <!-- 横向滚动条tabs -->
            <scroll-view class="status_left" scroll-x>
                <view v-if="isAgent" :class="idx == statusAc ? 'status_item statusAc' : 'status_item'"
                    @tap="clickStatus(idx, ele.type)" v-for="(ele, idx) in statuss" :key="ele.type">
                    {{ ele.name }}
                    <text v-if="idx == 0" class="tips">{{ wait >= 100 ? '99+' : wait }}</text>
                </view>
            </scroll-view>
            <!-- 右侧过滤图标 -->
            <view class="filter_right" @tap="filterBtn">
                <text class="filter iconfont icon-shaixuan"></text>
            </view>
        </div>
    </view>
</template>
  
<script setup>
import { ref, watch } from 'vue'

const props = defineProps({
    statuss: {},
    wait: {},
    isAgent: {
        type: Boolean,
        default: true
    }

})
const $emit = defineEmits(['handleEmitChange'])
const statusAc = ref(0)
const clickStatus = (idx, type) => {
    if (idx == statusAc.value) {
        $emit('handleEmitChange', 2)
        statusAc.value = null
    } else {
        statusAc.value = idx
        $emit('handleEmitChange', 3, type)
    }
}

const filterBtn = () => {
    $emit('handleEmitChange', 1)
}








</script>
  
<style lang="scss">
.status_container {
    height: 120rpx;
    background-color: #fff;

    .status_box {
        display: flex;
        align-items: center;
        width: 96%;
        margin: 0 auto;

        .status_left {
            width: 88%;
            height: 100rpx;
            line-height: 100rpx;
            white-space: nowrap;
            // background-color: pink;
            // padding-top: 30rpx;

            .status_item {
                position: relative;
                width: 160rpx;
                height: 60rpx;
                background-color: #f3f3f3;
                border: 2rpx solid transparent;
                border-radius: 30rpx;
                color: #666666;
                font-size: 28rpx;
                text-align: center;
                line-height: 60rpx;
                margin-right: 20rpx;
                display: inline-block;

                .tips {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    top: -10rpx;
                    right: -10rpx;
                    padding: 0 8rpx;
                    border-radius: 3rpx;
                    background-color: red;
                    color: #fff;
                    line-height: 30rpx;
                    border-radius: 15rpx;
                    font-size: 24rpx;

                }

            }

            .statusAc {
                background-color: #fff;
                color: #0D80D7;
                border: 2rpx solid #0D80D7;
            }
        }

        .filter_right {
            flex: 1;
            height: 120rpx;
            display: flex;
            justify-content: center;
            align-items: center;
            box-shadow: -13px ​2px 10px 13px rgba(255, 255, 255, .9);

            .filter {
                font-size: 40rpx;
                color: #333333;
            }


        }




    }
}
</style>
  